<template>
  <div>
    <!-- 顶部栏 -->
    <el-header>
      <Head></Head>
    </el-header>

    <!-- 侧边栏 -->
    <el-aside id="aside">
      <el-col :span="20">
        <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            :default-active="this.$route.path"
            router
            @close="handleClose">
          <el-menu-item index="/DesignPrinciples">
            <span slot="title">设计原则</span>
          </el-menu-item>

          <el-menu-item index="/Navigation">
            <span1 slot="title">导航</span1>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-aside>

    <!-- 主体-->

    <iframe class="iframe" src="static/navigation/daohang.html" width="100%" frameborder="0" scrolling="no"
            height="3200px"></iframe>


    <!-- 底部栏 -->
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <el-footer>
      <Foot></Foot>
    </el-footer>

  </div>

</template>

<script>
export default {
  name: "DesignPrinciples",
  //数据
  data() {
    return {
      navList: [
        {name: '/DesignPrinciples'},
        {name: '/Navigation'},
      ]
    }
  },
  //方法
  methods: {},
}

</script>

<style scoped>
#aside {
  float: left;
}

.iframe {
  position: absolute;
  top: 60px;
}

</style>

